<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="100px"
    class="movie-form"
  >
    <el-form-item label="电影名称" prop="title">
      <el-input v-model="form.title" />
    </el-form-item>

    <el-form-item label="原始名称" prop="original_title">
      <el-input v-model="form.original_title" placeholder="请输入原始电影名（如英文名）" />
    </el-form-item>

    <el-form-item label="导演" prop="director">
      <el-input v-model="form.director" />
    </el-form-item>

    <el-form-item label="主演" prop="cast">
      <el-input v-model="form.cast" placeholder="多个主演用逗号分隔" />
    </el-form-item>

    <el-form-item label="上映日期" prop="release_date">
      <el-date-picker
        v-model="form.release_date"
        type="date"
        placeholder="选择日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item label="电影时长" prop="duration">
      <el-input v-model="form.duration" placeholder="如120分钟" />
    </el-form-item>

    <el-form-item label="类型" prop="genres">
      <el-select
        v-model="form.genres"
        multiple
        placeholder="请选择电影类型"
      >
        <el-option
          v-for="genre in genreOptions"
          :key="genre"
          :label="genre"
          :value="genre"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="海报" prop="image_url">
      <el-input v-model="form.image_url" placeholder="输入海报图片URL" />
    </el-form-item>

    <el-form-item label="想看人数" prop="wish_count">
      <el-input-number v-model="form.wish_count" :min="0" />
    </el-form-item>

    <el-form-item label="评分" prop="average_rating">
      <el-input-number v-model="form.average_rating" :min="0" :max="10" :step="0.1" placeholder="请输入电影评分（0-10）" />
    </el-form-item>

    <el-form-item label="简介" prop="summary">
      <el-input
        v-model="form.summary"
        type="textarea"
        :rows="4"
        placeholder="请输入电影简介"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  movie: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['submit', 'cancel'])

const formRef = ref(null)
const form = ref({
  title: '',
  original_title: '',
  director: '',
  cast: '',
  release_date: '',
  genres: [],
  image_url: '',
  duration: '',
  wish_count: 0,
  average_rating: null,
  summary: ''
})

const genreOptions = [
  '动作',
  '喜剧',
  '爱情',
  '科幻',
  '恐怖',
  '剧情',
  '动画',
  '纪录片',
  '犯罪',
  '冒险'
]

const rules = {
  title: [{ required: true, message: '请输入电影名称', trigger: 'blur' }],
  original_title: [],
  director: [{ required: true, message: '请输入导演', trigger: 'blur' }],
  release_date: [{ required: true, message: '请选择上映日期', trigger: 'change' }],
  genres: [{ required: true, message: '请选择电影类型', trigger: 'change' }],
  duration: [],
  wish_count: [],
  average_rating: [{ required: true, message: '请输入评分', trigger: 'blur' }],
  summary: [{ required: true, message: '请输入简介', trigger: 'blur' }]
}

// 监听 movie prop 的变化
watch(
  () => props.movie,
  (newMovie) => {
    if (newMovie) {
      form.value = {
        ...newMovie,
        genres: Array.isArray(newMovie.genres) ? newMovie.genres : [],
        average_rating: newMovie.average_rating || newMovie.averageRating || null,
        summary: newMovie.summary || newMovie.description || ''
      }
    } else {
      form.value = {
        title: '',
        original_title: '',
        director: '',
        cast: '',
        release_date: '',
        genres: [],
        image_url: '',
        duration: '',
        wish_count: 0,
        average_rating: null,
        summary: ''
      }
    }
  },
  { immediate: true }
)

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    // 字段转换，保证与后端一致
    const payload = {
      title: form.value.title,
      originalTitle: form.value.original_title,
      director: form.value.director,
      cast: form.value.cast,
      releaseDate: form.value.release_date,
      genres: Array.isArray(form.value.genres) ? form.value.genres.join(',') : form.value.genres,
      imageUrl: form.value.image_url,
      duration: form.value.duration,
      wishCount: form.value.wish_count,
      averageRating: form.value.average_rating,
      summary: form.value.summary
    }
    emit('submit', payload)
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确')
  }
}
</script>

<style scoped>
.movie-form {
  max-width: 600px;
  margin: 0 auto;
}
</style> 